<!DOCTYPE html>
<html lang="en">

{include file='index/header'}

<body id="order-pay" class="flexv" onload="setup();">
<div id="common-header" class="flex">
    <a href="javascript:history.back()" class="cBtn back"><i class="iconfont icon-back"></i></a>
    <h1>订单付款</h1>
</div>
<form class="flexitemv scroll main" id="form" onsubmit="false" action="{:url('indent/pay')}">
    <div class="flex goods-item">
        <a href="" class="flexitem">
            <div class="img"><img src="__ROOT__/public/uploads/{$res.product.p_photo}" alt=""></div>
            <div class="flexitemv content">
                <h2>{$res.product.p_name}</h2>
                <p>{eq name='res.i_type' value='2'}标准套装{else /}免费领取{/eq} {eq name='res.i_type' value='1'}/ {eq name='res.i_packing' value='1'}正常包装{else /}不包装{/eq} / 邮费：¥ {$res.i_postage}.00{/eq}</p>
                <p class="flex p"><span>¥ {:round($res.product.p_price,2)}</span><em>x1</em></p>
            </div>
        </a>
    </div>
    <div class="part1">
        <div class="flex centerv item">
            <p>收件人</p>
            <input type="text" name="i_uname" placeholder="请输入收件人姓名" class="flexitem" data-rule="cname" data-errmsg="收件人姓名格式不正确">
        </div>
        <div class="flex centerv item">
            <p>手机号码</p>
            <input type="tel" name="i_phone" placeholder="请输入收件人手机号码" {neq name="Think.session.phone" value=""}disabled{/neq} class="flexitem" value="{$Think.session.phone}" data-rule="m" data-errmsg="收件人手机号码格式不正确" maxlength="11">
        </div>
        <div class="flex centerv item">
            <p>选择城市</p>
            <input type="hidden" id="postage" value="{:implode(',',config('postage_area'))}" />
            <select class="select" name="province" id="s1" data-rule="*" data-errmsg="请选择省份">
                <option></option>
            </select>
            <select class="select" name="city" id="s2" data-rule="*" data-errmsg="请选择城市">
                <option></option>
            </select>
            <select class="select" name="town" id="s3" data-rule="*" data-errmsg="请选择区、县">
                <option></option>
            </select>
        </div>

        <div class="flex centerv item">
            <p>详细地址</p>
            <input type="text" name="address" placeholder="街道门牌号" class="flexitem" data-rule="*" data-errmsg="请填写详细地址">
        </div>



    </div>
    <div class="part2">
        <div class="flex centerv item">
            <p>商品价格</p>
            <span class="goods-price" price="{$res.product.p_price}">¥ {:round($res.product.p_price,2)}</span>
        </div>
        {eq name='res.i_type' value='1'}
        <div class="flex centerv item">
            <p>规格</p>
            <span class="spec-price" price="{eq name='res.spec' value=''}0{else /}{$res.spec.s_price}{/eq}">{eq name='res.spec' value=''}无可选规格{else /}{$res.spec.s_name} / ¥ {$res.spec.s_price}.00{/eq}</span>
        </div>
        <div class="flex centerv item">
            <p>包装费用</p>
            <span class="pack-price" price="{eq name='res.i_packing' value='1'}{:config('packing')}{else /}0{/eq}">{eq name='res.i_packing' value='1'}¥ {:config('packing')}.00{else /}不包装{/eq}</span>
        </div>
        <input type="hidden" id='i_postage' name="i_postage" price="15"/>
        {else /}
        <input type="hidden" id='i_postage' name="i_postage" price="0"/>
        {/eq}
        <div class="flex centerv item">
            <p>配送费用</p>
            <span class="post-price" price="">包邮</span>
        </div>

        {if condition="($Think.session.userid neq '') and ($tz_integral gt 0)"}
        <div class="flex centerv item" id="integral">
            <p>使用积分</p>
            <span></span>
            <input type="hidden" name="i_uintegral" value=""><!---------使用的积分----------->
            <i class="iconfont icon-go" style="position: relative; top: 1px;"></i>
        </div>
        {/if}

        <input type="hidden" name="id" value="{$res.id}" />
        <input type="hidden" name="i_totprice" id="i_totprice" value="<?php $pack=''; if($res['i_packing']==1) $pack=5; echo $res['i_postage']+$pack+$res['spec']['s_price']; ?>" />

        <div class="flex centerv item special">
            <p>合计费用：<strong class="final-price" id="totprice" price='<?php $pack=""; if($res["i_packing"]==1) $pack=5; echo $res["i_postage"]+$pack+$res["spec"]["s_price"]; ?>'>¥ <?php echo $res["product"]["p_price"]+$res["i_postage"]; ?></strong></p>
        </div>
    </div>
    <div class="flex pay btn">
        <a href="javascript:;" class="flexitem centerv" id="submit">
            <i class="iconfont icon-mwpay"></i>
            <div class="flexitemv text">
                <p>微信支付</p>
                <span>使用微信完成支付</span>
            </div>
            <i class="iconfont icon-go"></i>
        </a>
    </div>
</form>
{js href="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"}
{js href="__ROOT__/template/index/plugins/mobile/layer.js"}
{js href="__ROOT__/public/static/js/checkform.js"}
{js href="__ROOT__/public/static/js/functions.js"}
{js href="__ROOT__/template/index/js/common.js"}
{js href="__ROOT__/template/index/js/geo.js"}
{js href="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"}
</body>
<script>
    var p_type = {$res.i_type};
    if(p_type==1) {
        var sendPrice = false;
        $('#s1').change(function () {
            var selValue = $(this).val(),
                postPrice = $('.post-price'),
                postAge = $('#postage').val(),
                Price = $('#totprice'),
                iTotprice = $('#i_totprice'),
                oldPrice = Price.attr('price');
            console.log(oldPrice);
            if (postAge.indexOf(selValue) > -1) {
                if (!sendPrice) {
                    sendPrice = true;
                    console.log(sendPrice);
                    postPrice.html('偏远地区需要加收邮费 ¥10.00');
                    postPrice.attr('price', 10);
                    Price.html('¥ ' + (Number(oldPrice) + 10).toFixed(2));
                    iTotprice.val(Number(oldPrice) + 10);
                    Price.attr('price', Number(oldPrice) + 10);
                }
            } else {
                postPrice.html('包邮');
                postPrice.attr('price', 0);
                console.log(sendPrice);
                if (sendPrice) {
                    Price.html('¥ ' + (Number(Price.attr('price')) - 10).toFixed(2));
                    iTotprice.val(Number(Price.attr('price')) - 10);
                    Price.attr('price', Number(Price.attr('price')) - 10);
                    sendPrice = false;
                } else {
                    Price.attr('price', Number(oldPrice));
                }

            }
        });
    }

    var goodsPrice = Number(document.querySelector('.goods-price').getAttribute('price'));
    var specPrice = 0,packPrice = 0;
    if(document.querySelector('.spec-price')){
        specPrice = Number(document.querySelector('.spec-price').getAttribute('price'));
    }
    if(document.querySelector('.pack-price')) {
        packPrice = Number(document.querySelector('.pack-price').getAttribute('price'));
    }
    var i_postage = Number(document.querySelector('#i_postage').getAttribute('price'));
    //不算邮费钱的总价
    document.querySelector('#totprice').innerText = '¥ ' + (goodsPrice + specPrice + packPrice + i_postage).toFixed(2);
    document.querySelector('#i_totprice').value =Number(goodsPrice + specPrice + packPrice + i_postage).toFixed(2);
    /*积分使用弹出层效果*/
    if (integral) {
        integral.addEventListener('click', function () {
            if(document.querySelector('.post-price')) {
                var postPrice = Number(document.querySelector('.post-price').getAttribute('price'));
            }
            var totalPrice = goodsPrice + specPrice + packPrice + postPrice + i_postage;
            layer.open({
                content: '<div class="sl"><p class="sl-item">可使用积分<span class="total-num">{neq name="Think.session.userid" value=""}{$tz_integral}{/neq}</span></p><input type="number" name="integral" value="" placeholder="请输入本次使用积分" class="sl-item"></div>'
                , skin: 'footer'
                , btn: ['确定', '取消']
                , yes: function (index, el) {
                    var num = el.querySelector('input[name=integral]').value;

                    integral.querySelector('span').innerText = num;
                    integral.querySelector('input').value = num;
                    document.querySelector('.final-price').innerText = '¥ ' + (totalPrice - Number(num)).toFixed(2);
                    document.querySelector('.final-price').setAttribute('price',(totalPrice - Number(num)).toFixed(2));
                    document.querySelector('#i_totprice').value = (totalPrice - Number(num)).toFixed(2);

                    layer.close(index);
                }
                , anim: 'up'
                , success: function (el) {
                    var totalNum = Number(el.querySelector('.total-num').innerText),
                        oInput = el.querySelector('input[name=integral]');

                    oInput.focus();
                    oInput.addEventListener('input', function () {
                        var currentNum = Number(oInput.value);

                        if (currentNum > totalPrice) {
                            oInput.blur();
                            oInput.value = totalPrice;
                            showMsg();
                        } else if (currentNum > totalNum) {
                            oInput.blur();
                            oInput.value = totalNum;
                            showMsg();
                        }
                    })
                }
            });
        });
    }
    /*积分使用弹出层效果结束*/

    new checkForm({
        form : '#form',
        btn : '#submit',
        error : function (e,msg){
            showMsg(msg,0,'#form');
        },
        complete : _.throttle(function (form){
            // showProgress('请稍后...');
            var url = form.getAttribute('action');
            var datas = $(form).serializeArray();
            $.post(url,datas,function(ret){
                showMsg(ret.msg,ret.code);
                if(ret.url) setTimeout(function (){window.location.href = ret.url;},1000);
            },'json');
        }, 5000, { 'trailing': false })
    });
</script>
{include file='index/footer'}
</html>